<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="2">
        <el-tag color="#ffd6d6" effect="dark" size="medium"><font color="#f6414a" style="font-size: 18px; font-weigth: 700">休息日</font></el-tag>
      </el-col>
    </el-row>
    <YearCalendar
      v-model="queryParams.rllRq"
      :activeDates="activeDates"
      @toggleDate="toggleDate"
      activeClass=""
      lang="tw"
      prefixClass="your_customized_wrapper_class"></YearCalendar>
  </div>
</template>

<script>
import { listRll, getRll, delRll, addRll, updateRll, exportRll, changeRllFlag } from '@/api/project/rll'
import YearCalendar from 'vue-material-year-calendar'
export default {
  name: 'Rll',
  components: {
    YearCalendar,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 生产日历表格数据
      rllList: [],
      activeDates: [],
      // 是否休息字典
      rllFlagOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 365,
        rllRq: this.moment().format('YYYY'),
        rllWeekday: null,
        rllWeek: null,
        rllFlag: 1,
      },
    }
  },
  watch: {
    'queryParams.rllRq': 'getList',
  },
  created() {
    this.getList()
    this.getDicts('sys_y_n').then((response) => {
      this.rllFlagOptions = response.data
    })
  },
  methods: {
    /* 点击日期 */
    toggleDate(dateInfo) {
      console.log(dateInfo) // { date: '2010-10-23', selected: true }
      let curDate = {
        date: dateInfo.date,
        className: 'red',
      }
      if (dateInfo.selected) {
        changeRllFlag({ rllRq: curDate.date, rllFlag: 1 }).then(() => {
          this.activeDates.push(curDate)
        })
      } else {
        changeRllFlag({ rllRq: curDate.date, rllFlag: 0 }).then(() => {
          this.activeDates = this.activeDates.filter((o) => o.date !== dateInfo.date)
        })
      }
    },
    /** 查询生产日历列表 */
    getList() {
      this.loading = true
      listRll(this.queryParams).then((response) => {
        this.rllList = response.rows
        this.activeDates = this.rllList.map((a) => {
          return {
            date: a.rllRq,
            className: 'red',
          }
        })
        this.loading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .vue-calendar__container {
  background-color: #fff;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
  .calendar__title {
    justify-content: left;
    height: 32px;
    line-height: 32px;
    border-bottom: 0;
    margin-bottom: 0;
  }
  .day__weektitle {
    height: 36px;
    opacity: 1;
    background: rgba(0, 8, 25, 0.05);
  }
  .calendar__body {
    padding: 0;
    background: #ffffff;
  }
  .calendar__day {
    color: #595e6a;
    font-size: 12px;
    font-weight: 400;
  }
  .container__months {
    padding: 0;
    flex: auto;
  }
  .container__month {
    flex: 24%;
    padding: 0;
  }
  .calendar:hover {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
  }
  .calendar {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
    min-height: auto;
    width: 100%;
    padding-left: 20px;
    margin-bottom: 8px;
    .day {
      width: 100%;
      height: 100%;
    }
    .day:hover {
      border-radius: 0;
    }
  }
  .grey {
    color: #bfc1c5;
  }
  .red {
    color: #f6414a;
    background-color: #feeced;
    border-radius: 0;
  }
}
</style>
